<template>
    <div>
        <el-card class="mb">
            <el-input placeholder="请输入关键词搜索" v-model="queryform.keyword"
                style="width: 200px;margin-right: 10px;"></el-input>
            <el-button type="primary" @click="search()" plain>查询</el-button>
            <el-button type="info" @click="research()" plain>重置</el-button>
            <el-button type="warning" style="float:right" @click="add()" plain>新增</el-button>
        </el-card>
        <el-card>
            <div class="table">
                <el-table :data="tableData" strip>

                    <el-table-column prop="id" label="序号" align="center" sortable></el-table-column>
                    <el-table-column prop="username" label="账号"></el-table-column>
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column label="Logo">
                        <template v-slot="scope">
                            <div style="display: flex; align-items: center">
                                <el-image style="width: 40px; height: 40px; border-radius: 50%" v-if="scope.row.avatar"
                                    :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="role" label="角色"></el-table-column>
                    <el-table-column prop="phone" label="电话"></el-table-column>
                    <el-table-column prop="info" label="简介"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                    <el-table-column prop="license" label="营业执照">
                        <template v-slot="scope">
                            <div style="display: flex; align-items: center">
                                <el-image style="width: 40px; height: 40px;" v-if="scope.row.license"
                                    :src="scope.row.license" :preview-src-list="[scope.row.license]"></el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="审核状态">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == '待审核'" type="primary">{{ scope.row.status }}</el-tag>
                            <el-tag v-if="scope.row.status == '通过'" type="success">{{ scope.row.status }}</el-tag>
                            <el-tag v-if="scope.row.status == '拒绝'" type="warning">{{ scope.row.status }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="time_range" label="营业时间"></el-table-column>
                    <el-table-column prop="type" label="类型"></el-table-column>
                    <el-table-column label="操作" align="center" width="180" fixed="right">
                        <template v-slot="scope">
                            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.pageNum"
                        :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout="total, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
            </div>

        </el-card>
        <el-dialog title="商家" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
            <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
                <el-form-item label="审核状态" prop="status">
                    <el-select style="width: 100%" v-model="form.status">
                        <el-option v-for="item in ['待审核', '通过', '拒绝']" :key="item" :value="item"
                            :label="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号" prop="username">
                    <el-input v-model="form.username" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" placeholder="密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="form.phone" placeholder="电话"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="info">
                    <el-input v-model="form.info" placeholder="简介"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="form.address" placeholder="地址"></el-input>
                </el-form-item>
                <el-form-item label="营业时间" prop="timeRange">
                    <el-input v-model="form.timeRange" @input="force" placeholder="营业时间"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-select style="width: 100%" v-model="form.type">
                        <el-option v-for="item in ['奶茶饮品', '快餐', '川菜', '烧烤']" :key="item" :value="item"
                            :label="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Logo">
                    <el-upload class="avatar-uploader" action="/files/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="avatar !== ''" :src="avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                </el-form-item>
                <el-form-item label="营业执照">
                    <el-upload class="avatar-uploader" action="/files/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess1">
                        <img v-if="license !== ''" :src="license" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="fromVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import service from '@/request';

export default {
    data() {
        return {
            tableData: [],  // 所有的数据
            pageNum: 1,   // 当前的页码
            pageSize: 10,  // 每页显示的个数
            total: 0,
            username: null,
            token: "",
            name: null,
            fromVisible: false,
            avatar: "",
            queryform: {
                keyword: "",
                pageNum: 1,
                pageSize: 10
            },
            license: "",
            form: {
                avatar: "",
                license: ""
            },
            user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择商家类型', trigger: 'blur' },
                ]
            },
            ids: []
        }
    },
    mounted() {
        this.token = window.localStorage.getItem("token")
        this.getlist()
    },
    methods: {
        del(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            const res=await service.post("/Business/delete?id="+id)
            console.log(res)
            if(res.code == 200){
                this.$message({
            type: 'success',
            message: '删除成功!'
          });
                this.getlist()
            }
        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        force(e){
this.form.timeRange=e;
this.$forceUpdate();
        },
        handleEdit(row){
this.form=row;
this.avatar=row.avatar;
this.license=row.license;
this.form.timeRange=row.time_range
this.fromVisible=true
        },
        search() {
            this.queryform.pageNum = 1;
            this.queryform.pageSize = 10;
            this.getlist()
        },
        research() {
            this.queryform.keyword = ""
            this.queryform.pageNum = 1;
            this.queryform.pageSize = 10;
            this.getlist()

        },
        async getlist() {
            const res = await service.post("/Business/list", this.queryform);
            console.log(res);
            if(res.code == 200){
                this.tableData = res.data.rows;
                this.total = res.data.total;
            }
           

        },
        add() {
            this.avatar = ""
            this.license = "";
            this.form = {}
            this.fromVisible = true

        },
        handleLicenseSuccess(e) {

        },
        async save() {
            this.form.avatar = this.avatar;
            this.form.license = this.license;
            this.form.role="BUSINESS"
       
                const res = await service.post("/Business/add", this.form);
                if (res.code == 200) {
                    this.fromVisible = false
                    this.$message.success("操作成功")
                    this.getlist()
                }

            
        },
        handleCurrentChange(e) {

        },
        handleAvatarSuccess(e) {
            console.log(e)
            this.avatar = e.data;
            console.log(this.form.avatar)
        },
        handleAvatarSuccess1(e) {

            this.license = e.data;
        }
    }
}
</script>
<style scoped>
.mb {
    margin-bottom: 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>